<template>
  <div class="contents">
    <PanelTitle title="种植规模" />
    <div ref="maps" class="maps mt"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { fitChartSize } from "@/utils/dataUtil.js";

const maps = ref(null);
onMounted(async () => {
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/plan/plant/scale/list",
    method: "get",
  });
  
  let yearlyList = []
  for (let item of res.data.areaPlantAcreage) {
    yearlyList.push(item.yearly)
  }
  for (let item of res.data.nationPlantAcreage) {
    yearlyList.push(item.yearly)
  }
  yearlyList = Array.from(new Set(yearlyList))
  yearlyList.sort((a, b) => {
    return a - b
  })

  let areaData = []
  let nationData = []

  for(let year of yearlyList) {
    let num = 0
    for(let item of res.data.areaPlantAcreage) {
      if(item.yearly == year){
        num = item.acreage
      }
    }
    areaData.push(num)

    num = 0
    for(let item of res.data.nationPlantAcreage) {
      if(item.yearly == year){
        num = item.dataValue
      }
    }
    nationData.push(num)
  }


  var myChart = echarts.init(maps.value);
  myChart.setOption({
    tooltip: {
      show: true,
      trigger: "axis",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "14%",
      top: "18%",
      containLabel: true,
    },
    legend: {
      data: [ "柘荣太子参种植面积"],
      color: "#fff",
      icon: "rect",
      bottom: fitChartSize(4),
      itemWidth: fitChartSize(6), // 设置icon宽度
      itemHeight: fitChartSize(6), // 设置icon高度
      textStyle: {
        fontSize: fitChartSize(9),
        color: "#ffffff",
      },
      data: [
        // {
        //   name: "全国太子参种植面积",
        //   itemStyle: {
        //     color: "#3789FF",
        //   },
        // },
        {
          name: "柘荣太子参种植面积",
          itemStyle: {
            color: "#FAD870",
          },
        },
      ],
    },
    xAxis: [
      {
        type: "category",
        data: yearlyList,
        axisLabel: {
          textStyle: {
            color: "#7AFFFD",
            fontSize: fitChartSize(9),
          },
        },
        axisPointer: {
          type: "shadow",
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        splitNumber: 4,
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.09)", //线条颜色
            // type: "dashed", //线条样式，默认是实现，dashed是虚线
          },
        },
        nameTextStyle: {
          color: "#fff",
          fontSize: fitChartSize(9),
          padding: [0, fitChartSize(-500), fitChartSize(-4), 0],
        },
        name: "单位：亩",
        min: 0,
        axisLabel: {
          textStyle: {
            color: "#7AFFFD",
            fontSize: fitChartSize(9),
          },
        },
      },
    ],
    series: [
      // {
      //   name: "全国太子参种植面积",
      //   type: "bar",
      //   barWidth: fitChartSize(18),
      //   itemStyle: {
      //     normal: {
      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //         {
      //           offset: 0,
      //           color: "rgba(55, 137, 255, 1)",
      //         },
      //         {
      //           offset: 1,
      //           color: "rgba(55, 137, 255, 0.08)",
      //         },
      //       ]),
      //     },
      //   },
      //   showBackground: true,
      //   backgroundStyle: {
      //     color: "rgba(55, 137, 255, 0.1)",
      //   },
      //   data: nationData,
      // },
      {
        name: "柘荣太子参种植面积",
        type: "bar",
        barWidth: fitChartSize(18),
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(250, 216, 112, 1)",
              },
              {
                offset: 1,
                color: "rgba(250, 216, 112, 0.08)",
              },
            ]),
          },
        },
        showBackground: true,
        backgroundStyle: {
          color: "rgba(55, 137, 255, 0.1)",
        },
        data: areaData,
      },
    ],
  });
});
</script>

<style scoped lang="scss">
.maps {
  height: vh(190);
  width: 100%;
}

.contents {
  background: linear-gradient(to bottom,
      rgba(5, 79, 99),
      rgba(5, 79, 99, 0.1),
      rgba(5, 79, 99));
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);

  .mt {
    margin-top: vh(-40);
  }
}
</style>